<template>
  <div style="width: 100%;height: 100%; position: relative;">

    <div>
      <van-cell>
        <template #title>
          <span class="custom-title">统计截止：</span>
          <span class="custom-title">{{time}}</span>
        </template>
      </van-cell>
      <van-cell style="margin-top: 10px;">
        <template #title>
          <table class="table" width="100%" border="1px solid #ccc" cellspacing="0" cellpadding="0">
            <tr>
              <th></th>
              <th>日雨量 {{yestary}}</th>
              <th>当天累计 {{day}} 8时起</th>
              <th>2天累计 {{yestary}} 8时起</th>
            </tr>
            <tr>
              <td>>=250</td>
              <td @click="showDetail('日雨量',' >=250 ',showData.ROWA||0, ' MAXD >=250  ' )">
                <span :class="{'blue':showData.ROWA}">{{showData.ROWA||0}}</span>
                <!--                <van-tag plain type="primary"></van-tag>-->
              </td>
              <td @click="showDetail('当天累计',' >=250 ',showData.ROWAA||0, '  TOTAL >=250  ') ">
                <span :class="{'blue':showData.ROWAA}">{{showData.ROWAA||0}}</span>
              </td>
              <td @click="showDetail('2天累计',' >=250 ',showData.ROWAAA||0, '  TTOAL >=250  ') ">
                <span :class="{'blue':showData.ROWAAA}">{{showData.ROWAAA||0}}</span>
              </td>
            </tr>
            <tr>
              <td>100~250</td>
              <td @click="showDetail('日雨量',' between 100 and 250 ',showData.ROWB||0, '  MAXD <250 and MAXD>=100  ') ">
                <span :class="{'blue':showData.ROWB}">{{showData.ROWB||0}}</span>
              </td>
              <td @click="showDetail('当天累计',' between 100 and 250 ',showData.ROWBB||0, '  TOTAL <250 and TOTAL>=100  ') ">
                <span :class="{'blue':showData.ROWBB}">{{showData.ROWBB||0}}</span>
              </td>
              <td @click="showDetail('2天累计',' between 100 and 250 ',showData.ROWBBB||0, '  TTOAL <250 and TTOAL>=100  ') ">
                <span :class="{'blue':showData.ROWBBB}">{{showData.ROWBBB||0}}</span>
              </td>
            </tr>
            <tr>
              <td>50~100</td>
              <td @click="showDetail('日雨量',' between 50 and 100 ',showData.ROWC||0, '  MAXD <100 and MAXD>=50  ') ">
                <span :class="{'blue':showData.ROWC}">{{showData.ROWC||0}}</span>
              </td>
              <td @click="showDetail('当天累计',' between 50 and 100 ',showData.ROWCC||0, '  TOTAL <100 and TOTAL>=50  ') ">
                <span :class="{'blue':showData.ROWCC}">{{showData.ROWCC||0}}</span>
              </td>
              <td @click="showDetail('2天累计',' between 50 and 100 ',showData.ROWCCC||0, '  TTOAL <100 and TTOAL>=50  ') ">
                <span :class="{'blue':showData.ROWCCC}">{{showData.ROWCCC||0}}</span>
              </td>
            </tr>
            <tr>
              <td>25~50</td>
              <td @click="showDetail('日雨量',' between 25 and 50 ',showData.ROWD||0, '  MAXD <50 and MAXD>=25  ') ">
                <span :class="{'blue':showData.ROWD}">{{showData.ROWD||0}}</span>
              </td>
              <td @click="showDetail('当天累计',' between 25 and 50 ',showData.ROWDD||0, '  TOTAL <50 and TOTAL>=25 ') ">
                <span :class="{'blue':showData.ROWDD}">{{showData.ROWDD||0}}</span>
              </td>
              <td @click="showDetail('2天累计',' between 25 and 50 ',showData.ROWDDD||0, '  TTOAL <50 and TTOAL>=25  ') ">
                <span :class="{'blue':showData.ROWDDD}">{{showData.ROWDDD||0}}</span>
              </td>
            </tr>
            <tr>
              <td>10~25</td>
              <td @click="showDetail('日雨量',' between 10 and 25 ',showData.ROWF||0, '  MAXD <25 and MAXD>=10  ') ">
                <span :class="{'blue':showData.ROWF}">{{showData.ROWF||0}}</span>
              </td>
              <td @click="showDetail('当天累计',' between 10 and 25 ',showData.ROWFF||0, '  TOTAL <25 and TOTAL>=10 ') ">
                <span :class="{'blue':showData.ROWFF}">{{showData.ROWFF||0}}</span>
              </td>
              <td @click="showDetail('2天累计',' between 10 and 25 ',showData.ROWFFF||0, '  TTOAL <25 and TTOAL>=10  ') ">
                <span :class="{'blue':showData.ROWFFF}">{{showData.ROWFFF||0}}</span>
              </td>
            </tr>
            <tr>
              <td>1~10</td>
              <td @click="showDetail('日雨量',' between 10 and 1 ',showData.ROWE||0, '  MAXD <10 and MAXD >0  ') ">
                <span :class="{'blue':showData.ROWE}">{{showData.ROWE||0}}</span>
              </td>
              <td @click="showDetail('当天累计',' between 10 and 1 ',showData.ROWEE||0, '  TOTAL <10 and TOTAL >0  ') ">
                <span :class="{'blue':showData.ROWEE}">{{showData.ROWEE||0}}</span>
              </td>
              <td @click="showDetail('2天累计',' between 10 and 1 ',showData.ROWEEE||0, ' TTOAL <10 and TTOAL >0  ') ">
                <span :class="{'blue':showData.ROWEEE}">{{showData.ROWEEE||0}}</span>
              </td>
            </tr>
            <tr>
              <td>=0</td>
              <td @click="showDetail('日雨量',' =0 ',showData.ROWH||0, '  MAXD =0  ' )">
                <span :class="{'blue':showData.ROWH}">{{showData.ROWH||0}}</span>
              </td>
              <td @click="showDetail('当天累计',' =0 ',showData.ROWHH||0, '  TOTAL =0  ' )">
                <span :class="{'blue':showData.ROWHH}">{{showData.ROWHH||0}}</span>
              </td>
              <td @click="showDetail('2天累计',' =0 ',showData.ROWHHH||0, '  TTOAL =0  ' )">
                <span :class="{'blue':showData.ROWHHH}">{{showData.ROWHHH||0}}</span>
              </td>
            </tr>
          </table>
        </template>
      </van-cell>

      <van-cell style="margin-top: 10px;" title="选择其他日期" :value="date" @click="show = true"/>

      <van-calendar style="position: absolute;z-index: 10000;" v-model="show" :poppable="true" @confirm="onConfirm"
                    :min-date="minData"/>

    </div>
  </div>
</template>

<script>
    import API from "../../api/api_common";
    import {Notify} from 'vant';


    export default {
        name: "Static",
        data() {
            return {
                time: "",
                date: '',
                show: false,
                minData: new Date(2010, 0, 1),
                showData: {},
                yestary: "",
                day: "",
            }
        },
        mounted() {
            this.getTime();
        },
        methods: {
            showDetail(column, row, value,sql) {
                this.$router.push({
                    name: 'Detail', params: {
                        type: column,
                        time: this.date,
                        row: row,
                        value: value,
                        sql: sql
                    }
                })

            },
            formatDate(date) {
                return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
            },
            onConfirm(date) {
                this.show = false;
                this.date = `${this.formatDate(date)}`;
                this.getData(this.date)
            },
            getData(date) {
                this.setDay(date);
                API.getStatic({time: date}).then(res => {
                    this.showData = res.recordset[0];
                    console.log(res)
                }).catch(err => {
                    console.log(err)
                    Notify({type: 'danger', message: '获取统计信息失败'});
                })
            },
            getTime() {
                API.getMaxTime().then(res => {
                    console.log(res);
                    this.time = res.recordset[0].TM.replace("T", " ").substring(0, 16);
                    this.date = this.time.substring(0, 10);
                    this.getData(this.time.substring(0, 10));
                    this.day = this.date.substring(5, 10)
                }).catch(err => {
                    console.log(err);
                    Notify({type: 'danger', message: '获取最新统计时间失败'});
                }).finally(() => {
                    this.loading = false;
                })
            },
            setDay(time) {
                time=time.replace(/\//g,"-");
                this.day=time.substring(5,10);
                let temp = this.stringToDate(time);
                let tms=temp.getTime()-1000*60*60*24;
                temp=new Date(tms);
                this.yestary=this.dateToString(temp);
            },
            stringToDate(dateStr, separator) {
                console.log("jish",dateStr)
                if (!separator) {
                    separator = "-";
                }
                let dateArr = dateStr.split(separator);
                let year = parseInt(dateArr[0]);
                let month;
                if (dateArr[1].indexOf("0") == 0) {
                    month = parseInt(dateArr[1].substring(1));
                } else {
                    month = parseInt(dateArr[1]);
                }
                let day = parseInt(dateArr[2]);
                let date = new Date(year, month - 1, day);
                return date;
            },
            dateToString(date) {
                let month = (date.getMonth() + 1).toString();
                let day = (date.getDate()).toString();
                if (month.length == 1) {
                    month = "0" + month;
                }
                if (day.length == 1) {
                    day = "0" + day;
                }
                let dateTime =  month + "-" + day;
                return dateTime;
            },
        }
    }
</script>

<style scoped>
  .custom-title {
    margin-right: 4px;
    vertical-align: middle;
  }

  .search-icon {
    font-size: 16px;
    line-height: inherit;
  }

  .table td {
    white-space: nowrap;
    height: 30px;
    text-align: center;
  }

  .blue {
    color: #1989fa;
  }
</style>
